<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel height="400px" :interval="10000" class="swiper">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.img" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 30px 0">
      <el-row :gutter="10">
        <el-col>
          <h2>系统公告</h2>
          <el-collapse v-model="activeNames">
            <el-collapse-item :title="item.name" :name="item.id" v-for="item in noticeList" :key="item.id">
              <div>发布时间：{{item.time}}</div>
              <div>{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>

<!--      <el-row :gutter="10" style="margin-top: 25px">-->
<!--        <el-col>-->
<!--          <h2>资讯公告</h2>-->
<!--          <div v-for="(item,index) in consultingList" :key="item.id">-->
<!--           <div class="rowC">-->
<!--             <div>{{item.name}}</div>-->
<!--             <div>{{item.createTime}}</div>-->
<!--           </div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>

  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      bannerList:[],
      tableData:[],
      activeNames: ['1'],
      noticeList: [],
      consultingList: []
    }
  },
  created() {
    this.request.get("/banner").then(res => {
      console.log(res.data)
      this.bannerList = res.data
    })

    this.getList()

    this.getConsulting()
  },
  methods: {
    getList() {
      this.request.get("/notice").then(res => {
        if (res.code === '200') {
          this.noticeList = res.data
          console.log(res)
        } else {
        }
      })
    },
    getConsulting() {
      this.request.get("/consulting").then(res => {
        if (res.code === '200') {
          this.consultingList = res.data
          console.log(res)
        } else {
        }
      })
    }
  }
}
</script>

<style>
.swiper img {
  width: 100%;
  height: 100%;
}
.rowC {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px;
  background: #ccc;
}
</style>
